(function () {
    let option = {
        title: "",
        content: "",
        btn: ["确定", "取消"],
        okFun: function () {

        },
        cancelFun: function () {

        },
        background: "#fff",
        color: "#444",
        width: "400px",
        height: "220px"
    }
    let errorOption = {
        title: "错误",
        content: "",
        btn: ["确定", "取消"],
        okFun: function () {

        },
        cancelFun: function () {

        },
        background: "#fa6262",
        color: "#ffffff",
        width: "400px",
        height: "220px"
    }
    let infoOption = {
        title: "信息",
        content: "",
        btn: ["确定", "取消"],
        okFun: function () {

        },
        cancelFun: function () {

        },
        background: "#4fc7ff",
        color: "#fafce3",
        width: "400px",
        height: "220px"
    }
    let warningOption = {
        title: "警告",
        content: "",
        btn: ["确定", "取消"],
        okFun: function () {

        },
        cancelFun: function () {

        },
        background: "#faa03b",
        color: "#ffffff",
        width: "400px",
        height: "200px"
    }
    let error = function (options = errorOption) {
        other(CheckOption(errorOption,options));
    }
    let info = function (options = infoOption) {
        other(CheckOption(infoOption,options));
    }
    let warning = function (options = warningOption) {
        other(CheckOption(warningOption,options))
    }

   let other = function (options = option) {
        CheckOption(option,options)
        let body = document.body;
        let bodyStyle = body.style;

       /* bodyStyle.background = "rgba(175, 184, 187, 0.53)";
        bodyStyle.position = "relative";
        bodyStyle.zIndex = 1;*/

       let alertBackBox = document.createElement("div");

       alertBackBox.style.position = "absolute";
       alertBackBox.style.left = "0";
       alertBackBox.style.top = "0";
       alertBackBox.style.display = "flex";
       alertBackBox.style.width = "100%";
       alertBackBox.style.height = (window.innerHeight
           || document.documentElement.clientHeight
           || document.body.clientHeight)+"px";
       alertBackBox.style.flexDirection = "row";
       alertBackBox.style.justifyContent = "center";
       alertBackBox.style.alignItems = "center";
       alertBackBox.style.zIndex = "1111";

       alertBackBox.style.background = "rgba(100,100,100,0.5)";
       body.append(alertBackBox);

        let alertBox = document.createElement("div");

        alertBox.style.position = "absolute";
        alertBox.style.left = "0";
        alertBox.style.top = "0";
        alertBox.style.display = "flex";
        alertBox.style.width = "100vw";
        alertBox.style.height = "90vh";
        alertBox.style.flexDirection = "row";
        alertBox.style.justifyContent = "center";
        alertBox.style.alignItems = "center";
        alertBox.style.zIndex = "9999";

        body.appendChild(alertBox);

        let alert = document.createElement("div");
        alert.style.width = options.width;
        alert.style.height = options.height;
        alert.style.background = options.background;
        alert.style.borderRadius = "6px";
        alert.style.color = options.color;
        alertBox.appendChild(alert);
        let alertTitle = document.createElement("p");


        setTitleAndFooterStyle(alertTitle);
        alertTitle.style.borderBottom = "2px solid rgba(243,235,235,0.2)";
        alertTitle.style.justifyContent = "space-between";

        let alertTitleContent = document.createElement("span");
        alertTitleContent.innerText = options.title;
        alertTitleContent.style.marginLeft = "15px";

        alertTitle.appendChild(alertTitleContent);

        let alertClose = document.createElement("a");
        alertClose.href = "javascript:void(0);";
        alertClose.onclick = closeAlert;
        alertClose.style.marginRight = "15px";

        function closeAlert() {
            body.removeChild(alertBackBox);
            body.removeChild(alertBox);
        }

        let alertCloseIcon = document.createElement("i");
        alertCloseIcon.className = "iconfont icon-close";
        alertClose.appendChild(alertCloseIcon);
        alertTitle.appendChild(alertClose);

        let alertContent = document.createElement("div");
        alertContent.innerHTML = options.content;
        alertContent.style.margin = "0 auto";
        alertContent.style.padding = "15px";
        alertContent.style.width = "calc(96% - 30px)";
        alertContent.style.height = "calc("+options.height+" - 130px)";

        let alertFooter = document.createElement("div");
        setTitleAndFooterStyle(alertFooter);
        alertFooter.style.borderTop = "2px solid rgba(243,235,235,0.2)";
        alertFooter.style.alignItems = "center"
        alertFooter.style.justifyContent = "flex-end";

        function setTitleAndFooterStyle(element) {
            element.style.height = "40px";

            element.style.borderRadius = "2px";
            element.style.margin = "2px";
            element.style.display = "flex";
            element.style.lineHeight = "40px";
            element.style.fontSize = "18px";
            element.style.fontWeight = "bold";
        }

        let alertOkBtn = document.createElement("button");
        let alertCancelBtn = document.createElement("button");
        // alertOkBtn.style.border = "1px solid #1db7fd";
        // alertOkBtn.style.background = "#30a1d2";
        // alertCancelBtn.style.border = "1px solid #faa850";
        // alertCancelBtn.style.background = "#ffefc8";
       alertOkBtn.className = "btn";
       alertCancelBtn.className = "btn btn-info";
        if (options.btn.length === 1) {
            alertOkBtn.innerText = options.btn[0];
            alertOkBtn.style.margin = "0 15px";
            alertFooter.appendChild(alertOkBtn);
        }
        if (options.btn.length === 2) {
            alertOkBtn.innerText = options.btn[0];
            alertCancelBtn.innerText = options.btn[1];
            alertCancelBtn.style.margin = "0 15px";
            alertFooter.appendChild(alertOkBtn);
            alertFooter.appendChild(alertCancelBtn);
        }


        setFooterBtnStyle(alertOkBtn);
        setFooterBtnStyle(alertCancelBtn);

        alertOkBtn.onclick = function () {
            options.okFun();
            closeAlert();
        }

        alertCancelBtn.onclick = function () {
            options.cancelFun();
            closeAlert();
        }

        function setFooterBtnStyle(element) {
            //height:32px;
            element.style.padding = "0 20px";
            element.style.borderRadius = "3px";
        }

        alert.appendChild(alertTitle);
        alert.appendChild(alertContent);
        alert.appendChild(alertFooter);

    }
    function CheckOption(baseOption=option,newOption=option){
        if (!newOption){
            newOption = baseOption;
            return newOption;
        }
        if (newOption instanceof String||(typeof newOption)==="string"){
            baseOption.content = newOption;
            newOption = baseOption;
            return newOption;
        }
        if (!newOption.btn){
            newOption.btn = baseOption.btn;
        }
        if (!newOption.color){
            newOption.color = baseOption.color;
        }
        if (!newOption.width){
            newOption.width = baseOption.width;
        }
        if (!newOption.height){
            newOption.height = baseOption.height;
        }
        if (!newOption.background){
            newOption.background = baseOption.background;
        }
        if (!newOption.title){
            newOption.title = baseOption.title;
        }
        if (!newOption.cancelFun){
            newOption.cancelFun = baseOption.cancelFun;
        }
        if (!newOption.okFun){
            newOption.okFun = baseOption.okFun;
        }
        return newOption;
    }
    window.message = {info: info, warning: warning, error: error, other: other};

})(window)
export let MESSAGE = message;


